<template>
	<div >
		<div>
			<div class="title">
				<text class="large-size">{{detail.name}}</text>
			</div>
			<div>
				<text class="text1"><text class="text2 small-size">工单号</text><text class="text3 small-size">{{detail.no}}</text></text>
				<text class="text1"><text class="text2 small-size">联系人</text><text class="text3 small-size">{{detail.contacts}}</text></text>
				<text class="text1">
					<text class="text2 small-size">联系电话</text>
					<a :href="dailPhoneNum" class="text3 small-size">
						<text class="text3 phonenum">{{detail.tel}}<image class="phone-image"  v-bind:src="dialImage"></image>
						</text>
					</a>
				</text>
				</text>
				<text class="text1"><text class="text2 small-size">提交时间</text><text class="text3 small-size">{{detail.time}}</text></text>
				<text class="text1"><text class="text2 small-size">所属物业</text><text class="text3 small-size">{{detail.property}}</text></text>
			</div>
			<div class="image-wrap">
				<div class="images-item-wrap"  v-for="(item, i) in imgList">
					<image class="images-item" :src="item.attchUrlSmall" @click="clickImage(i)"></image>
				</div>
			</div>
			<div class="process">
				<div class="cell" v-for="item in approvalList">
					<div class="panel process-panel">
						<div class="process-image-wrap" >
							<image class="detail-image" :src="item.imgUrl"></image>
						</div>
						<div class="detail-info">
							<text class="detail-name small-size" >{{item.operatorName}}</text>
							<text v-if="item.statusName=='通过'" class="detail-result pass small-size">{{item.statusName}}</text>
							<text v-else class="detail-result nopass small-size">{{item.statusName}}</text>
							<text class="detail-time small-size" >{{item.apprTimeStr}}</text>
						</div>
					</div>
				</div>
			</div>
			<div class="button-wrap">
				<div class="approval-button-wrap">
					<a class="approval-button"   href="#">
						<text class="button-text normal-size" @click="passThrough">通过</text>
					</a>
					<a class="approval-button"   href="#">
						<text class="button-text normal-size" @click="reject">拒绝</text>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	.content {
		padding: 0.35rem;
	}
	.title {
		flex-direction: column;
		padding: 20px 30px 10px;
		border-bottom-color: #f4f4f4;
		border-bottom-style: solid;
		border-bottom-width: 1px;

	}
	.text1 {
		width: 100%;
		display: inline-block;
		padding: 15px 30px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.text2 {
		display: inline-block;
		color: #666;
	}
	.text3 {
		display: inline-block;
		float: right;
	}
	.phonenum {
		color: #38adff;
		padding-right: 40px;
	}
	.phone-image {
		display: inline-block;
		position: absolute;
		top: 6px;
		right: 0;
		width: 30px;
		height: 30px;
	}
	.content-wrap{
		padding: 0.3rem;
		background-color: #fff;
	}
	.image-wrap{
		flex-direction: row;
		flex-wrap: wrap;
		padding: 15px 30px;
	}
	.images-item-wrap {
		padding: 20px;
	}
	.images-item {
		width: 160px;
		height: 160px;
		cursor: none !important;
	}
	.process-panel {
		padding: 10px 30px 15px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.process-image-wrap {
		display: inline-block;
		position: absolute;
		top: 19px;
		left: 20px;
	}
	.detail-image {
		border-radius: 30px;
		width: 60px;
		height: 60px;
	}
	.detail-info {
		position: relative;
		top: 0;
		left: 0;
		padding-left: 85px;
	}
	.detail-name {
		padding-bottom: 5px;
	}

	.detail-time {
		position: absolute;
		top: 0;
		right: 15px;
		color: #999;
	}

	.pass {
		color: #108EE9;
	}
	.nopass {
		color: #F04134;
	}
	.button-wrap{
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-top: 30px;
	}
	.approval-button-wrap {
		flex-direction: row;
		align-items: flex-end;
		width: 100%;
	}
	.approval-button {
		flex: 1;
		padding: 20px;
		color: #108EE9;
		text-align: center;
	}
	.button-text {
		text-align: center;
		color: #108EE9;
	}
</style>

<script>
	const getDetail =  '/approved/ajax/approveddetail';
	const saveData =  '/approved/ajax/save';

	var dingtalk = require('weex-dingtalk');
	var modal = weex.requireModule('modal');

	export default {
		data: function(){
			return  {
				detail:{id: '',name: '',no: '',contacts: '',tel: '',time: '',property:''},
				imgList: [],
				approvalList: [],
				dialImage: _staticresources + '/images/dial-image.png',
				dailPhoneNum: 'tel:18759227183'
			}
		} ,
		beforeMount: function(){

		},
		mounted: function(){
			dingtalk.ready(function(){
				// 设置导航
				const dd = dingtalk.apis;
				/*dd.config({
					jsApiList : [ 'runtime.info', 'biz.contact.choose', 'biz.util.chosen', 'device.notification.modal','runtime.permission.requestAuthCode', 'biz.navigation.setIcon',
						'device.notification.confirm', 'device.notification.alert', 'device.notification.actionSheet',
						'device.notification.prompt', 'biz.ding.post','biz.navigation.close', 'biz.navigation.setMenu',
						'biz.util.openLink', 'biz.navigation.setTitle', 'biz.navigation.setRight',
						'device.notification.hidePreloader', 'device.notification.showPreloader', 'biz.util.previewImage', 'biz.util.uploadImageFromCamera', 'biz.util.uploadImage',
						'biz.util.scan', 'biz.util.previewImage', 'biz.customContact.choose', 'biz.navigation.setLeft', 'biz.util.datepicker', 'device.notification.toast',
						'biz.map.locate', 'biz.map.search', 'device.geolocation.get', 'biz.map.view'
					]
				});
				dd.biz.navigation.setLeft({
					show: true,
					control: true,
					text: '',
					android: true
				});
				dingtalk.on('goBack',function(e){
					e.preventDefault();
					dd.biz.util.openLink({
						url: _webpath + '/tenantmanager/index'
					})
				});*/
				/*document.addEventListener('backbutton', function(e) {
				 // 在这里处理你的业务逻辑
				 e.preventDefault(); //backbutton事件的默认行为是回退历史记录，如果你想阻止默认的回退行为，那么可以通过preventDefault()实现
				 location.href = _webpath + '/tenantmanager/index'
				 });*/
			});

			var self = this;
			getAjax(getDetail,{approvedInfoId: approvedInfoId, eventType: eventType},true,function (data) {
				if(data.messageType == 'SUCCESS') {
					var result= data.valueObj;
					self.detail= {id: result.id,name: result.name,no: result.orderNo,contacts: result.contact,
						tel: result.mobile,time: result.submitTimeStr,property: result.tenantName};
					self.dailPhoneNum =  'tel:'+result.mobile;
					self.imgList= result.imgList;
					var list = result.memoList||[];
					for(var i = 0; i < list.length;i++){
						if(list[i].headImage&&list[i].headImage[0]&&list[i].headImage[0].attchUrlSmall){
							list[i].imgUrl = list[i].headImage[0].attchUrlSmall;
						}else {
							//	list[i].imgUrl = 'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg';
							list[i].imgUrl = _staticresources + '/images/head.png';
						}
					}
					self.approvalList= list;
				}
			});
		},
		methods: {
			clickImage: function(index){
				const dd = dingtalk.apis;
				dd.biz.util.previewImage({
					urls: [this.imgList[index].attchUrlWatermark],//图片地址列表
					current: this.imgList[index].attchUrlSmall,//当前显示的图片链接
					onSuccess : function(result) {
						/**/
					},
					onFail : function(err) {}
				})
			},
			reject: function(){   //status：02 通过        03 拒绝
				var self = this;
				showConfirm('确认拒绝审核吗?',function(value){
					if(value=='确认'){
						self.processingApprova(saveData,{approvedInfoId: approvedInfoId,status: '03', eventType: eventType});
					}
				});
			},
			passThrough: function(){
				var self = this;
				showConfirm('确认通过审核吗?',function(value){
					if(value=='确认'){
						self.processingApprova(saveData,{approvedInfoId:approvedInfoId,status: '02', eventType: eventType});
					}
				});
			},

			processingApprova: function(url,param){
				formAjax(url,param,true,function (data) {
					if(data.messageType == 'SUCCESS') {
						setTimeout(function() {
							/*dingtalk.ready(function () {
								var dd = dingtalk.apis;
								//alert(_webpath + '/approved/toapproved' + '?approvedInfoId=' + id + '&eventType=' + eventType)
								dd.biz.util.openLink({
									url: _webpath + '/approved/index' + '?eventType=' + eventType
								})
							});*/
							location.href = _webpath + '/approved/index' + '?eventType=' + eventType
						}, 2000);
					}
					else if(data.messageType == 'FAIL') {
						modal.alert({
							message: data.messageContent,
							okTitle: '确定',
						}, function () {
							if(data.redirectUrl != '') {
								dingtalk.ready(function(){
									const dd = dingtalk.apis;
									dd.biz.util.openLink({
										url: _webpath + data.redirectUrl
									})
								})
							}
						});
					}
				});
			}
		}
	}
</script>